<template>
  <div class="container">
    <div class="header-content">
      <img class="logo" src="@/assets/image/header-content.webp" width="100%" alt="加载失败">
    </div>

    <el-tabs v-model="activeName" @tab-click="handleClick">

      <el-tab-pane label="基本信息" name="first" lazy>

        <div class="content-user">
          <h2>姓名：{{ this.userInfo.userName }}</h2>
          <h3>电话：{{ this.userInfo.phone }}</h3>
          <h3>性别：{{ this.userInfo.sex == 1 ? '男' : this.userInfo.sex == 2 ? '女' : '保密' }}</h3>
          <el-button type="danger" plain @click="loginout">登出</el-button>

        </div>



      </el-tab-pane>

      <el-tab-pane label="修改信息" name="second">
        <div class="content-user">
          <div class="form-control">
            <el-form ref="form" :model="modify_form" label-width="80px">

              <el-form-item label="手机号">
                <el-input v-model="modify_form.phone"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="modify_form.userName"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group v-model="modify_form.sex">
                  <el-radio label=1>男</el-radio>
                  <el-radio label=2>女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="modify_Submit">确认</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="修改密码" name="third">
        <div class="content-user">
          <div class="form-control">
            <el-form ref="form" :model="password_form" label-width="80px">


              <el-form-item label="旧密码">
                <el-input v-model="password_form.oldPassword"></el-input>
              </el-form-item>
              <el-form-item label="新密码">
                <el-input v-model="password_form.newPassword"></el-input>
              </el-form-item>
              <el-form-item label="确认密码">
                <el-input v-model="password_form.newPasswordAgain"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="modifyPassword_Submit">确认</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="上传简历" name="fourth" action="">

        <div class="content-user">

          <div class="form-control" v-if="(this.resume == '')">

            <el-upload class="upload-demo" drag :http-request="uploadResume" :limit=1 action="" accept="">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传pdf文件</div>
            </el-upload>
          </div>
          <div v-else>
            <el-button type="success" @click="getUserResume" plain>下载简历</el-button>
            <el-button type="warning" plain @click="resetResume">重新上传</el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import userAPI from '@/api/userApi';
export default {
  data() {
    return {
      password_form: {
        userId: '',
        oldPassword: '',
        newPassword: '',
        newPasswordAgain: '',
      },
      modify_form: {
        userId: '',
        userName: '',
        phone: '',
        sex: '',
      },
      userInfo: {
        userId: '',
        userName: '',
        phone: '',
        sex: '',

      },
      resume: '',
      activeName: 'first'

    }
  },
  mounted() {
    let userId = this.$route.query.userId;
    userAPI.getUserInfo(userId).then(res => {
      let data = (res.data.data)
      this.userInfo.userId = data.id;
      this.userInfo.userName = data.userName;
      this.userInfo.phone = data.phone
      this.userInfo.sex = data.sex;

      this.resume = data.resume;

    }).catch(err => {
      this.$message({
        message: '接口请求失败',
        type: 'error',

      })
    })
  },
  methods: {
    getUserResume() {
      userAPI.getResume(this.userInfo.userId).then(res => {
        let fileName = this.userInfo.userName + '.pdf'
         this.handle(res.data, fileName)
      });
    },
    handle(data, fileName) {
      // 文件导出
      if (!data) {
        return
      }
      let url = window.URL.createObjectURL(new Blob([data], { type: 'application/pdf' }))

      const a = document.createElement('a')
      a.style.display = 'none'
      a.download = fileName
      a.href = url
      a.click()
      if (document.body.contains(a)) {
        document.body.removeChild(a)
      }
    },
    loginout() {
      localStorage.removeItem('user_info')
      this.$router.push('/login')

    },


    handleClick(tab, event) {
      // console.log(tab, event);
    },
    modifyPassword_Submit() {
      this.password_form.userId = this.userInfo.userId;

      userAPI.changePassword(this.password_form).then(res => {
        //?这里判断一下

        if (res.data.code == 0) {
          this.$message({
            message: "修改密码失败",
            type: "error"
          })

        } else {
          this.$message({
            message: "修改密码成功",
            type: "success"
          })
        }

      }).catch(error => {
        this.$message({
          message: "修改密码失败",
          type: "error"
        })
      })

    },
    modify_Submit() {
      this.modify_form.userId = this.userInfo.userId;
      userAPI.changeInfo(this.modify_form).then(res => {
        if (res.data.code == 0) {
          this.$message({
            message: "修改失败",
            type: "error"
          })

        } else {
          this.$message({
            message: "修改成功",
            type: "success"
          })
        }
      }).catch(error => {
        this.$message({
          message: "修改失败",
          type: "error"
        })

      })

    },
    uploadResume(e) {
     // console.log(e)
      userAPI.uploadResume(this.userInfo.userId, e).then(res => {
        if (res.data.code == 1) {
          this.$message({
            message: "上传成功",
            type: "success"
          })
          this.resume = res.data.data;
        }
      })

    },
    resetResume() {
      this.resume = ''
    }
  }
}
</script>

<style lang="less" scoped>
.form-control {
  width: 41%;
  height: auto;
  margin: auto;
  text-align: center;
  font-size: large;

  .el-radio-group>.el-radio {
    text-align: start;
    margin: 0px 50px;
  }

  .el-button {
    margin: 0px 50px;
  }
}

.el-tab-pane {
  transition: all 2s;
}

.el-tabs {
  margin: 10px 10px;
  height: 50px;

}

/deep/ .el-tabs__nav-scroll {
  background-color: #95a5a6;
  border-radius: 5px;
}

.header-content {
  height: 100%;
  width: 100%;
}

.logo {
  width: 100%;
  height: 100%;
  transition: all 0.5s;
  overflow: hidden;
  border-radius: 5px;

}

.logo:hover {
  transform: scale(1.05);
  transition: all 0.5s;
  overflow: hidden;
  box-shadow: 0px 0px 10px #bdc3c7;
}


.content-user {
  background-color: #ecf0f1;
  margin-top: 2%;
  padding: 3%;
  border-radius: 10px;
  border: 1px skyblue solid;
  transition: all 0.5s;
  color: #34495e;
}

.content-user:hover {
  box-shadow: 0px 0px 20px #bdc3c7;
  transition: all 0.5s;

}
</style>